<template>
  <div class="error-container" v-if="show">
    <van-empty
      :image="image"
      :description="message"
    >
      <template #bottom>
        <van-button 
          round 
          type="primary" 
          size="small"
          @click="onRetry"
        >
          重试
        </van-button>
      </template>
    </van-empty>
  </div>
</template>

<script setup>
defineProps({
  show: {
    type: Boolean,
    default: false
  },
  message: {
    type: String,
    default: '加载失败，请重试'
  },
  image: {
    type: String,
    default: 'error'
  }
})

const emit = defineEmits(['retry'])

const onRetry = () => {
  emit('retry')
}
</script>

<style scoped>
.error-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
</style> 